<template>
	<div class="widget">
		<li class="widget-item">
			<p class="widget-title">标题</p>
			<el-input type="text" class="val" size="mini" @blur="commitData" v-model="formData.title" />
			<div></div>
		</li>
		<li class="widget-item">
			<p class="widget-title-big">设置触发条件</p>
			<!-- <br /> -->
		</li>
		<li class="widget-item">
			<p class="widget-title">探测到敌方</p>
			<el-select
				v-model="formData.unit_type"
				class="widget-select"
				@change="commitData"
				size="mini"
				:popper-append-to-body="false"
				popper-class="select-popper"
				placeholder="请选择"
			>
				<el-option v-for="item in unit_types" :key="item.value" :label="item.label" :value="item.value"> </el-option>
			</el-select>
		</li>
		<li class="widget-item">
			<p class="widget-title">我方战损</p>
			<el-select
				v-model="formData.unit_damage"
				class="widget-select"
				@change="commitData"
				size="mini"
				:popper-append-to-body="false"
				popper-class="select-popper"
				placeholder="请选择"
			>
				<el-option v-for="item in enemy_units" :key="item.value" :label="item.label" :value="item.value"> </el-option>
			</el-select>
		</li>

		<li class="widget-item">
			<p class="widget-title">对方战损</p>
			<el-select
				v-model="formData.enemy_unit_damage"
				class="widget-select"
				@change="commitData"
				size="mini"
				:popper-append-to-body="false"
				popper-class="select-popper"
				placeholder="请选择"
			>
				<el-option v-for="item in units" :key="item.value" :label="item.label" :value="item.value"> </el-option>
			</el-select>
		</li>
	</div>
</template>
<script>
export default {
	data() {
		return {
			formData: {},
			enemy_units: [],
			unit_types: [],
			units: [],
		};
	},
	props: ["data"],
	watch: {
		data(val) {
			console.log("data", val);
		},
	},
	methods: {
		commitData() {
			let content = JSON.parse(JSON.stringify(this.formData));
			this.$EventBus.$emit("defaultValue", content);
		},
		getUnitTypes() {
			this.unit_types = [
				{ label: "无", value: "" },
				{ label: "无人机", value: "uuv" },
				{ label: "无人艇", value: "ship" },
			];
		},
		getUnits() {
			this.units = [
				{ label: "无", value: "" },
				{ label: "无人机", value: "formation1" },
				{ label: "无人艇", value: "formation2" },
			];
		},
		getEnemyUnits() {
			this.enemy_units = [
				{ label: "无", value: "" },
				{ label: "无人机", value: "formation1" },
				{ label: "无人艇", value: "formation2" },
				{ label: "雷达站", value: "formation2" },
			];
		},
	},
	mounted() {
		if (this.data) {
			if (typeof this.data == "object") {
				let data = JSON.parse(JSON.stringify(this.data));
				this.formData = data;
			} else this.formData = JSON.parse(this.data);
		}
		this.getEnemyUnits();
		this.getUnits();
		this.getUnitTypes();
	},
};
</script>

<style lang="less" scoped>
.val {
	width: 180px;
}
</style>
